<template>
	<view>
		<!-- 顶部 Tab -->
		<uni-segmented-control :current="current" :values="['表格','柱状图','折线图','面积图']" @clickItem="onClick"
			styleType="text"></uni-segmented-control>

		<!-- 表格 -->
		<view v-show="current===0">
			<view class="table">
				<view class="row header">
					<text class="cell time">时间</text>
					<text class="cell location">安装点信息</text>
					<text class="cell avg">平均值</text>
				</view>
				<view class="row" v-for="(item, index) in tableData" :key="index">
					<text class="cell time">{{ item.time }}</text>
					<text class="cell location">{{ item.location }}</text>
					<text class="cell avg">{{ item.avg }}</text>
				</view>
			</view>
		</view>

		<!-- 柱状图 -->
		<view v-show="current===1">
			<l-echart ref="chartRef" @finished="initChart" style="width: 100%; height: 1000rpx;"></l-echart>
		</view>

		<!-- 折线图 -->
		<view v-show="current===2">
			<l-echart ref="lineChartRef" @finished="initLineChart" style="width: 100%; height: 1000rpx;"></l-echart>
		</view>

		<!-- 面积图 -->
		<view v-show="current===3">
			<l-echart ref="areaChartRef" @finished="initAreaChart" style="width: 100%; height: 1000rpx;"></l-echart>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted,
		nextTick
	} from 'vue'
	import chartData from '@/static/data/chartData.json'

	// #ifdef MP
	const echarts = require('@/static/echarts.min.js')
	// #endif

	// #ifndef MP
	import * as echarts from 'echarts'
	// #endif

	const current = ref(0)
	const tableData = ref([])

	// 图表实例
	const chartRef = ref(null)
	let chartInstance = null
	const lineChartRef = ref(null)
	let lineChartInstance = null
	const areaChartRef = ref(null)
	let areaChartInstance = null

	const fetchChartData = async () => {
		return chartData;
	}

	// 页面加载时请求表格数据
	onMounted(async () => {
		tableData.value = await fetchChartData()
	})

	// 初始化图表
	const initChart = async () => {
		chartInstance = await chartRef.value.init(echarts)
	}
	const initLineChart = async () => {
		lineChartInstance = await lineChartRef.value.init(echarts)
	}
	const initAreaChart = async () => {
		areaChartInstance = await areaChartRef.value.init(echarts)
	}

	// 统一渲染函数
	function renderChart(type, instance) {
		const res = tableData.value
		const times = [...new Set(res.map(item => item.time))]
		const locations = [...new Set(res.map(item => item.location))]

		const series = locations.map((loc, idx) => {
			const base = {
				name: loc,
				type: type, // 'bar' | 'line'
				smooth: type !== 'bar',
				data: times.map(time => {
					const record = res.find(item => item.time === time && item.location === loc)
					return record ? record.avg : null
				}),
				itemStyle: {
					color: ['#5470C6', '#91CC75', '#EE6666', '#FAC858'][idx % 4]
				},
				label: {
					show: true,
					position: 'top'
				}
			}
			if (type === 'line-area') {
				base.type = 'line'
				base.areaStyle = {
					opacity: 0.3
				}
			}
			return base
		})

		const option = {
			// title: {
			// 	text: type === 'bar' ? '柱状图' : type === 'line' ? '折线图' : '面积图'
			// },
			tooltip: {
				trigger: 'axis'
			},
			legend: {
				data: locations,
				bottom: 30,
				left: 'center'
			},
			grid: {
				top: 60,
				bottom: 200,
				left: 50,
				right: 30
			},
			xAxis: {
				type: 'category',
				data: times,
				axisLabel: {
					rotate: 45,
					margin: 20
				}
			},
			yAxis: {
				type: 'value'
			},
			series
		}

		nextTick(() => {
			instance.setOption(option)
			instance.resize()
		})
	}

	// Tab 切换
	function onClick(e) {
		current.value = e.currentIndex
		if (current.value === 1 && chartInstance) renderChart('bar', chartInstance)
		else if (current.value === 2 && lineChartInstance) renderChart('line', lineChartInstance)
		else if (current.value === 3 && areaChartInstance) renderChart('line-area', areaChartInstance)
	}
</script>

<style lang="scss" scoped>
	.table {
		border: 1rpx solid #ccc;
		overflow: hidden;

		.row {
			display: flex;
			align-items: center;
			border-bottom: 1rpx solid #fafafa;

			.cell {
				padding: 12rpx;
				text-align: center;
				border-right: 1rpx solid #ccc;
				font-size: 24rpx;
			}

			.cell.time {
				flex: 2;
				white-space: nowrap;
				font-size: 26rpx;
			}

			.cell.location {
				flex: 2;
				font-size: 24rpx;
			}

			.cell.avg {
				flex: 1;
				font-size: 22rpx;
			}

			.cell:last-child {
				border-right: none;
			}
		}

		.row:last-child {
			border-bottom: none;
		}

		.header {
			background: #f5f5f5;
			font-weight: bold;
			color: #333;
			font-size: 26rpx;
		}

		.row:nth-child(even) {
			background: #fafafa;
		}
	}
</style>